<?php
include('../twitter/header.php');
//$_SESSION['username'] = "asd";
?>


<script
	src="http://www.google.com/jsapi" type="text/javascript"></script>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"
	type="text/javascript"></script>
<script type="text/javascript">
      google.load("swfobject", "2.1");
    </script>
<script type="text/javascript">

<?php echo "var username = '".$_SESSION['username']."'"?>

//  TO GET THUMBNAIL GET: http://img.youtube.com/vi/<VIDEO_ID>/1.jpg

//var array = ["http://www.youtube.com/watch?v=5mYrS6S49W0",
//             	"http://www.youtube.com/watch?v=Q8KWW8i6Svs",
 //            	"http://www.youtube.com/watch?v=fpeBVTOsaKk&feature=gre_index",
//				"http://www.youtube.com/watch?v=iYq5a5YYYLc&feature=grec_index",
	//			"http://www.youtube.com/watch?v=zJflu7z4QyI&feature=grec_index",
		//		"http://www.youtube.com/watch?v=tZEl8d-RE4M&feature=channel"];

// Arrays used for tweets info
var array = new Array();
var authors = new Array();
var ids = new Array();
var news = new Array();
var favorites = new Array();
var deleted = new Array();
var times = new Array();
var titles = new Array();
//var contents = new Array();

var newVideos = 0;
var numberVideos = 0;
var numberFavorites = 0;

var shownVideos = new Array(); // contains 0 or 1: 0 means this video is not currently shown, 1 yes

var filter = 'all';

var useArray = 1;
var useAuthor = null;
var j = 0;

var timeBarWidth = 800;
 
// Update a particular HTML element with a new value
function updateHTML(elmId, value) {
  document.getElementById(elmId).innerHTML = value;
}

      
// This function is called when an error is thrown by the player
function onPlayerError(errorCode) {
	if (errorCode == 150) {
		alert("Broadcast of the video requested does not allow playback.");
	} else {
  		alert("The video requested cannot be found.");
	}
}

// This function is called when the player changes state
function onPlayerStateChange(newState) {
  if (newState == 0) {
	changeVideo(-1);
  }
  
}

function getTimeStringFromSeconds(seconds) { // from 70 sec -> return 01:10
	seconds = Math.round(seconds);
	var minutes = Math.floor(seconds/60);
	seconds = (seconds % 60);
	if (minutes < 10) {
		minutes = "0" + "" + minutes;
	}
	if (seconds < 10) {
		seconds = "0" + "" + seconds;
	}
	return minutes + ":" + seconds;
}

// Display information about the current state of the player
function updatePlayerInfo() {
  // Also check that at least one function exists since when IE unloads the
  // page, it will destroy the SWF before clearing the interval.
  if(ytplayer  && ytplayer.getDuration) {
	if (ytplayer.getPlayerState() == 1) {
		var src = document.getElementById("playImg").src;
		if (src.search("pause") == -1) {
			document.getElementById("playImg").src = "../img/pause.png";
		}
	} else {
		var src = document.getElementById("playImg").src;
		if (src.search("play") == -1) {
			document.getElementById("playImg").src = "../img/play.png";
		}
	}
	// update time
	var cTime;
	var tTime;
	if (ytplayer.getPlayerState() != 5) {
		cTime = getTimeStringFromSeconds(ytplayer.getCurrentTime());
		tTime = getTimeStringFromSeconds(ytplayer.getDuration());
	} else {
		cTime = "--:--";
		tTime = "--:--";
	}
	updateHTML("currentTime", cTime + " / " + tTime);

	if (ytplayer.isMuted()) {
		document.getElementById("volumeBar").style.width = "0px";
	} else {
		document.getElementById("volumeBar").style.width = ytplayer.getVolume() + "px";
	}
    document.getElementById("timeBar").style.width = (ytplayer.getCurrentTime()/ ytplayer.getDuration() * timeBarWidth) + "px";
    document.getElementById("loadedBar").style.width = (((ytplayer.getVideoBytesLoaded() + ytplayer.getVideoStartBytes())/ytplayer.getVideoBytesTotal()) * timeBarWidth) + "px";
  }
}

// Allow the user to set the volume from 0-100
function setVideoVolume(volume) {
  if(ytplayer){
	unMuteVideo();
    ytplayer.setVolume(volume);
  }
}

function getVideoId(url) {
	var idlen = 11;
	var pos = url.search("/?v=");
	var id = url.substr(pos + 2, idlen);
	return id;
}

function setCurrentTime() {
	var time = parseInt(document.getElementById("currentTime").value);
	if (isNaN(time) || time < 0) {
		alert("Please enter a valid number");
	} else if (ytplayer) {
		ytplayer.seekTo(time, 1);
	}
}

function setTime(time) {
	if (isNaN(time)) {
		alert("Please enter a valid number");
	} else if (ytplayer) {
		if (time < 0) {
			time = 0;
		}
		ytplayer.seekTo(time, 1);
	}
}

function loadVideo() {
	var url = document.getElementById("newUrl").value;
	var id = getVideoId(url);
	if (ytplayer) {
		ytplayer.loadVideoById(id, 0);
	}	
}

function highlight(i) {
	for (var k = 0; k < array.length; k++) {
		if (shownVideos[k] == 1) {
			var table = document.getElementById(k);
			if (k == i) {
				table.style.background =  "rgba(153,187,255,0.4)"; 
			} else {
				table.style.background = "rgba(0,0,0,0)";
			}
		}
	}
}

function changeVideo(readId) {
	if (news[j] == 1) {
		unNew(j);
	}
	if (readId == -1) {
		j = findNextVideo(j);
	} else if (readId == -2) {
		j = findPreviousVideo(j);
	} else {
		j = readId;
	}
	if (ytplayer) {
		var id = getVideoId(array[j % array.length]);
		if (!document.getElementById("autoplay").checked) {
			ytplayer.cueVideoById(id, 0);
		} else {
			ytplayer.loadVideoById(id, 0);
		}	
	}
	highlight(j);
}

function findNextVideo(index) {
	for (var i = index + 1; i < array.length; i++) {
		var checkFav = (filter == 'favorites');
		var checkNew = (filter == 'new');
		if (checkFav) {
			if (favorites[i] == 0) {
				continue;
			}
		}
		if (checkNew) {
			if (news[i] == 0) {
				continue;
			}
		}
		if (useAuthor == null) {
			return i;
		} else {
			if (useAuthor == authors[i]) {
				return i;
			}
		}
	}
	for (var i = 0; i < index; i++) {
		var checkFav = (filter == 'favorites');
		var checkNew = (filter == 'new');
		if (checkFav) {
			if (favorites[i] == 0) {
				continue;
			}
		}
		if (checkNew) {
			if (news[i] == 0) {
				continue;
			}
		}
		if (useAuthor == null) {
			return i;
		} else {
			if (useAuthor == authors[i]) {
				return i;
			}
		}
	}
	return index;
}

function findPreviousVideo(index) {
	for (var i = index - 1; i >= 0; i--) {
		var checkFav = (filter == 'favorites');
		var checkNew = (filter == 'new');
		if (checkFav) {
			if (favorites[i] == 0) {
				continue;
			}
		}
		if (checkNew) {
			if (news[i] == 0) {
				continue;
			}
		}
		if (useAuthor == null) {
			return i;
		} else {
			if (useAuthor == authors[i]) {
				return i;
			}
		}
	}
	for (var i = array.length - 1; i > index; i--) {
		var checkFav = (filter == 'favorites');
		var checkNew = (filter == 'new');
		if (checkFav) {
			if (favorites[i] == 0) {
				continue;
			}
		}
		if (checkNew) {
			if (news[i] == 0) {
				continue;
			}
		}
		if (useAuthor == null) {
			return i;
		} else {
			if (useAuthor == authors[i]) {
				return i;
			}
		}
	}
	return index;
}

function addVideo() {
	var url = document.getElementById("addVideo").value;
	document.getElementById("addVideo").value = "";
	addVideoInArray(url);
}

function addVideoInArray(url) {
	array[array.length] = url;
}

function playOrPause() {
	if (ytplayer) {
		if (ytplayer.getPlayerState() == 1) {
			document.getElementById("playImg").src = "../img/playover.png";
			pauseVideo();
		} else {
			document.getElementById("playImg").src = "../img/pauseover.png";
			playVideo();
		}
	}
}

function playVideo() {
  if (ytplayer) {
    ytplayer.playVideo();
  }
}

function pauseVideo() {
  if (ytplayer) {
    ytplayer.pauseVideo();
  }
}

function playOver() {
	if (ytplayer) {
		if (ytplayer.getPlayerState() == 1) {
			document.getElementById("playImg").src = "../img/pauseover.png";
		} else {
			document.getElementById("playImg").src = "../img/playover.png";
		}
	}
}

function playOut() {
	if (ytplayer) {
		if (ytplayer.getPlayerState() == 1) {
			document.getElementById("playImg").src = "../img/pause.png";
		} else {
			document.getElementById("playImg").src = "../img/play.png";
		}
	}
}

function muteOrUnmute() {
	if (ytplayer) {
		if (ytplayer.isMuted()) {
			document.getElementById("volumeImg").src = "../img/volumeover.png";
			unMuteVideo();
		} else {
			document.getElementById("volumeImg").src = "../img/novolumeover.png";
			muteVideo();
		}
	}
}

function muteVideo() {
  if(ytplayer) {
    ytplayer.mute();
  }
}

function unMuteVideo() {
  if(ytplayer) {
    ytplayer.unMute();
  }
}

function getImgUrl(videoId) {
	return "http://img.youtube.com/vi/" + videoId + "/3.jpg";
}

function setImgSrc(source, id) {
	document.getElementById(id).src = source;
}

function updatePlaylist() {
	var divNewVideos = document.getElementById('newVideos');
	if (newVideos == 0) {
		divNewVideos.innerHTLM = '';
		divNewVideos.style.display = 'none';
	} else {
		divNewVideos.innerHTML = newVideos;
		divNewVideos.style.display = 'inline';
	}
	
	var ul = document.getElementById("list");
	if (ul.hasChildNodes()) {
		while (ul.childNodes.length >= 1) {
			ul.removeChild(ul.firstChild);
		}
	}

	var checkFavorites = (filter == 'favorites');
	var checkNew = (filter == 'new');
	// update nav
	var navAll = document.getElementById('playlistNavAll');
	var navFav = document.getElementById('playlistNavFavorite');
	var navNew = document.getElementById('playlistNavNew');
	navAll.innerHTML = 'All (' + numberVideos + ')';
	navFav.innerHTML = 'Favorites (' + numberFavorites + ')';
	navNew.innerHTML = 'New (' + newVideos + ')';
	if (filter == 'favorites') {
		navFav.style.background = 'rgba(160,160,160,0.5)';
		navAll.style.background = 'rgba(153,187,255,0.5)';
		navNew.style.background = 'rgba(153,187,255,0.5)';
	} else if (filter == 'new') {
		navNew.style.background = 'rgba(160,160,160,0.5)';
		navAll.style.background = 'rgba(153,187,255,0.5)';
		navFav.style.background = 'rgba(153,187,255,0.5)';
	} else { // filter == 'all'
		navAll.style.background = 'rgba(160,160,160,0.5)';
		navFav.style.background = 'rgba(153,187,255,0.5)';
		navNew.style.background = 'rgba(153,187,255,0.5)';
	}

	
	for (var i = 0; i < array.length; i++) {
		if (useAuthor != null) {
			if (authors[i] != useAuthor) {
				shownVideos[i] = 0;
				continue;
			}
		}
		if (checkFavorites) {
			if (favorites[i] == 0) {
				shownVideos[i] = 0;
				continue;
			}
		}
		if (checkNew) {
			if (news[i] == 0) {
				shownVideos[i] = 0;
				continue;
			}
		}
		shownVideos[i] = 1;
		
		var li = document.createElement('li');
		//var xml = new XMLHttpRequest();
		//var url = "getvideoinfo.php" + "?videoid=" + getVideoId(array[i]);
		//xml.open("GET", url, false);
		//xml.send(null);
		//var infos = JSON.parse(xml.responseText);
		var infos = new Array();
		infos['title'] = "TITLE";
		var title = document.createElement('a');
		var author = document.createElement('a');
		var deleteButton = document.createElement('img');
		var img = document.createElement('img');
		var time = document.createElement('span');
		var retweet = document.createElement('img');
		var favorite = document.createElement('img');
		var newVid = document.createElement('img');
		
		var table = document.createElement('table');
		var tr1 = document.createElement('tr');
		var th = document.createElement('th');
		var tr2 = document.createElement('tr');
		var td2 = document.createElement('td');
		var tr3 = document.createElement('tr');
		var td31 = document.createElement('td');
		var td32 = document.createElement('td');
		var tr4 = document.createElement('tr');
		var td4 = document.createElement('td');
		var tr5 = document.createElement('tr');
		var td5 = document.createElement('td');
		var tr6 = document.createElement('tr');
		var td6 = document.createElement('td');

		time.setAttribute('style', 'color: #fff; text-shadow: 0px 0px 2px #000;');
		time.innerHTML = times[i];
		
		deleteButton.onclick = deleteVideo(i);
		deleteButton.setAttribute('src', '../img/delete.png');
		deleteButton.setAttribute('id', 'delete' + i);
		deleteButton.setAttribute('title', 'Delete');
		deleteButton.onmouseover = changeSrcTo('../img/deleteover.png', 'delete' + i);
		deleteButton.onmouseout = changeSrcTo('../img/delete.png', 'delete' + i);
		
		title.setAttribute('href', 'javascript:void(0)');
		title.onclick = setLink(i);
		//title.innerHTML = infos['title'].substr(0,29) + " ...";
		title.innerHTML = titles[i];
		
		author.setAttribute('href', 'javascript:void(0)');
		author.setAttribute('style', 'color: rgb(153, 187, 255);');
		author.setAttribute('title', "Show only " + authors[i] + "'s video");
		author.onclick = changePlaylist(authors[i]);
		author.innerHTML = "<font color='#fff'>by</font> " + authors[i] + "<br>";
		
		img.setAttribute('src', getImgUrl(getVideoId(array[i])));
		img.onclick = setLink(i);
		img.setAttribute('style', 'position: relative');
		
		if (favorites[i] == 0) {
			favorite.onclick = addToFavorites(i);
			favorite.setAttribute('src', '../img/favorite.png');
			favorite.setAttribute('id', 'favorite' + i);
			favorite.setAttribute('title', 'Add to favorite');
			favorite.onmouseover = changeSrcTo('../img/favoriteover.png', 'favorite' + i);
			favorite.onmouseout = changeSrcTo('../img/favorite.png', 'favorite' + i);
		} else {
			favorite.onclick = removeFromFavorites(i);
			favorite.setAttribute('src', '../img/removefavorite.png');
			favorite.setAttribute('id', 'favorite' + i);
			favorite.setAttribute('title', 'Remove from favorite');
			favorite.onmouseover = changeSrcTo('../img/removefavoriteover.png', 'favorite' + i);
			favorite.onmouseout = changeSrcTo('../img/removefavorite.png', 'favorite' + i);
		}

		retweet.setAttribute('src', '../img/retweet.png');
		retweet.setAttribute('id', 'retweet' + i);
		retweet.setAttribute('title', 'Retweet');
		retweet.onmouseover = changeSrcTo('../img/retweetover.png', 'retweet' + i);
		retweet.onmouseout = changeSrcTo('../img/retweet.png', 'retweet' + i);

		newVid.setAttribute('src', '../img/new.png');
		newVid.setAttribute('style', '-webkit-box-shadow: 0px 0px 0px #000; -moz-box-shadow: 0px 0px 0px #000; box-shadow: 0px 0px 0px #000; position:absolute; left: 10px; top: 0px;');
		
		// set table attributes
		th.setAttribute('colspan', '2');
		td2.setAttribute('colspan', '2');
		td31.setAttribute('rowspan', '3');
		table.setAttribute('style', 'border-bottom: 1px solid #000; width: 265px; position: relative; left: -20px;');
		table.setAttribute('id', i);
		
		// insert elements
		if (news[i] == 1) {
			th.appendChild(newVid);
		}
		th.appendChild(author);
		tr1.appendChild(th);

		td2.appendChild(title);
		tr2.appendChild(td2);

		td31.appendChild(img);
		td32.appendChild(retweet);
		tr3.appendChild(td31);
		tr3.appendChild(td32);

		td4.appendChild(deleteButton);
		tr4.appendChild(td4);

		td5.appendChild(favorite);
		tr5.appendChild(td5);

		td6.appendChild(time);
		tr6.appendChild(td6);
		
		table.appendChild(tr1);
		table.appendChild(tr2);
		table.appendChild(tr3);
		table.appendChild(tr4);
		table.appendChild(tr5);
		table.appendChild(tr6);
		
		li.appendChild(table);
		ul.appendChild(li);
	}
highlight(j);
	
}

function getFreshTweets (doItNow) {
	var xml = new XMLHttpRequest();
	xml.open("GET", "../twitter/retrieveTweets.php", true);
	xml.send(null);
	var xmlhttp = new XMLHttpRequest();
	var tweets;
	var url = "getTweets.php" + "?user=" + username;
	xmlhttp.open("GET", url, false);
	xmlhttp.send(null);
	tweets = JSON.parse(xmlhttp.responseText);
	updateHTML("test", "Videos: " + array.length);
	array = new Array();
	authors = new Array();
	ids = new Array();
	news = new Array();
	favorites = new Array();
	deleted = new Array();
	times = new Array();
	titles = new Array();
	newVideos = 0;
	numberVideos = 0;
	numberFavorites = 0;
	for (var i = 0; i < tweets.length; i++) {
		numberVideos++;
		if (tweets[i]['new'] == '1') {
			newVideos++;
		}
		array[i] = tweets[i]['youtube_url'];
		authors[i] = tweets[i]['author'];
		ids[i] = tweets[i]['id_tweet'];
		news[i] = tweets[i]['new'];
		favorites[i] = tweets[i]['favorite'];
		deleted[i] = 0;
		if (favorites[i] == '1') {
			numberFavorites++;
		}
		times[i] = tweets[i]['time'];
		titles[i] = tweets[i]['title'];
	}
	updatePlaylist();
		
}

function setFilter(f) {
	filter = f;
	useAuthor = null;
	updatePlaylist();
}

function unNew(i) {
	var xml = new XMLHttpRequest();
	var url = "mysqlcommand.php?command=unnew&id=" + ids[i];
	xml.open("GET", url, true);
	xml.send(null);
	newVideos--;
	news[i] = 0;
	updatePlaylist();
}

function deleteVideo(i) {
	return function () {
		var xml = new XMLHttpRequest();
		var url = "mysqlcommand.php" + "?command=delete&id=" + ids[i];
		xml.open("GET", url, true);
		xml.send(null);
		deleted[i] = 1;
		numberVideos--;
		if(favorites[i] == 1) {
			numberFavorites--;
		}
		if(news[i] == 1) {
			newVideos--;
		}
		updatePlaylist();
	}
}

function addToFavorites(i) {
	return function() {
		var xml = new XMLHttpRequest();
		var url = "mysqlcommand.php?command=addtofavorites&id=" + ids[i];
		xml.open("GET", url, true);
		xml.send(null);
		favorites[i] = 1;
		numberFavorites++;
		updatePlaylist();
	}
}

function removeFromFavorites(i) {
	return function() {
		var xml = new XMLHttpRequest();
		var url = "mysqlcommand.php?command=removefromfavorites&id=" + ids[i];
		xml.open("GET", url, true);
		xml.send(null);
		favorites[i] = 0;
		numberFavorites--;
		updatePlaylist();
	}
}

function changeSrcTo(source, id) {
	return function() {
		document.getElementById(id).src = source;
	}
}

function changePlaylist(author) {
	return function() {
		if (author == null) {
			useAuthor = null;
		} else {
			useAuthor = author;
		}
		updatePlaylist();
	}
}



function setLink(i) {
	return function() {
		changeVideo(i);
	}	
}

// This function is automatically called by the player once it loads
function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("ytPlayer");
  //get fresh tweets from database
  setInterval('getFreshTweets(0)', 10000);
  getFreshTweets(0);
  // This causes the updatePlayerInfo function to be called every 250ms to
  // get fresh data from the player
  setInterval(updatePlayerInfo, 50);
  updatePlayerInfo();
  ytplayer.addEventListener("onStateChange", "onPlayerStateChange");
  ytplayer.addEventListener("onError", "onPlayerError");
  //Load an initial video into the player
  ytplayer.cueVideoById(getVideoId(array[0]));
}

// The "main method" of this sample. Called when someone clicks "Run".
function loadPlayer() {
  // Lets Flash from another domain call JavaScript
  var params = { allowScriptAccess: "always" , allowFullscreen: "true"};
  // The element id of the Flash embed
  var atts = { id: "ytPlayer" };
  // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
  swfobject.embedSWF("http://www.youtube.com/apiplayer?" +
                     "&enablejsapi=1&playerapiid=player1", 
                     "videoDiv", "100%", "100%", "8", null, null, params, atts);
}

	function _run() {
		loadPlayer();
	}
	google.setOnLoadCallback(_run);

     function goTo(event) {
        if (ytplayer) { 
            if (!event) {
				var event = arguments[0];
            }
			var x = event.offsetX;
			if (!x) {
				x = event.layerX;
			}
			var timeBar = document.getElementById("timeBar");
			setTime((x/timeBarWidth) * ytplayer.getDuration() - 2);
        }
     }

     var drag = 0;
     function changeVolume(event) {
		if (ytplayer && drag) {
			if (!event) {
				event = window.event;
			}
			var x = event.offsetX;
			setVideoVolume(x);
		}
	 }

	 function stopDrag() {
		if (ytplayer) {
			drag = 0;
		}
	 }

	 function startDrag(event) {
			if (ytplayer) {
				drag = 1;
				if (!event) {
					event = window.event;
				}
				var x = event.offsetX;
				setVideoVolume(x);
			}
		 }
     
     function previousOver() {
		document.getElementById("previous").src = "../img/previousover.png";
     }

     function previousOut() {
    	 document.getElementById("previous").src = "../img/previous.png";
     }

     function nextOver() {
 		document.getElementById("next").src = "../img/nextover.png";
      }

      function nextOut() {
     	 document.getElementById("next").src = "../img/next.png";
      }

      function volumeOver() {
          if (ytplayer) {
              var vol = document.getElementById("volumeImg");
              if (ytplayer.isMuted()) {
				 vol.src = "../img/novolumeover.png";
              } else {
				 vol.src = "../img/volumeover.png";
              }
          }
      }

      function volumeOut() {
          if (ytplayer) {
        	var vol = document.getElementById("volumeImg");
			if (ytplayer.isMuted()) {
				vol.src = "../img/novolume.png";	
			} else {
    	  		vol.src = "../img/volume.png";
			}
          }
      }

      var interval = "";
      
      function goright() {
    	var popout = document.getElementById("popout");
		popout.style.left = (parseInt(popout.style.left) + 10) + "px";
		if (parseInt(popout.style.left) >= 0) {
			clearInterval(interval);
			interval = "";
		}
	  }

      function goleft() {
    	var popout = document.getElementById("popout");
  		popout.style.left = (parseInt(popout.style.left) - 10) + "px";
  		if (parseInt(popout.style.left) <= -180) {
  			clearInterval(interval);
  			interval = "";
  		}
  	  }

      function goleft2() {
      	var playlist = document.getElementById("playlist");
    		playlist.style.right = (parseInt(playlist.style.right) + 10) + "px";
    		if (parseInt(playlist.style.right) >= 0) {
    			clearInterval(interval);
    			interval = "";
    		}
    	}

      function goright2() {
        	var playlist = document.getElementById("playlist");
      		playlist.style.right = (parseInt(playlist.style.right) - 10) + "px";
      		if (parseInt(playlist.style.right) <= -320) {
      			clearInterval(interval);
      			interval = "";
      		}
      	}

      function show() {
		var popout = document.getElementById("popout");
		if (parseInt(popout.style.left) == -180) {
			interval = setInterval("goright()", 1);
		}
      }

      function hide() {
  		var popout = document.getElementById("popout");
  		if (parseInt(popout.style.left) == 0) {
  			interval = setInterval("goleft()", 1);
  		}
      }


      function show2() {
		var playlist = document.getElementById("playlist");
		if (parseInt(playlist.style.right) == -320) {
			interval = setInterval("goleft2()", 1);
		}
      }

      function hide2() {
  		var playlist = document.getElementById("playlist");
  		if (parseInt(playlist.style.right) == 0) {
  			interval = setInterval("goright2()", 1);
  		}
      }
      
     function animation() {
		var popout = document.getElementById("popout");
		if (parseInt(popout.style.left) < 0) {
			show();
		} else {
			hide();
		}
     }

     function animation2() {
 		var playlist = document.getElementById("playlist");
 		if (parseInt(playlist.style.right) < 0) {
 			show2();
 		} else {
 			hide2();
 		}
      }

     function fullscreen() {
		var video = document.getElementById("video");
		var currentTime = document.getElementById('currentTime');
		//var time = document.getElementById("time");
		if (video.style.width == "100%") {
			// shrink
			video.style.width = "800px";
			video.style.height = "466px";
			currentTime.style.color = '#000';
			//time.style.box-shadow = '0px 0px 8px 1px rgb(153,204,255)';
		} else {
			// full screen
			video.style.width = "100%";
			video.style.height = "92%";
			currentTime.style.color = 'rgb(153,204,255)';
			//time.style.box-shadow = '0px 0px 8px 1px #000';
		}
     }
	
    </script>


<div id="video">

<div id="videoDiv">Loading...</div>

<div id="timeContainer">
<div id="time" onclick="goTo(event);">
<div id="loadedBar"></div>
<div id="timeBar"></div>
</div>
</div>

<center>
<div id="currentTime">--:-- / --:--</div>
</center>

</div>
<p id="test">test</p>

<div id="popout" style="left: -180px; z-index: 1000;"><img id="tab"
	onmouseover="animation()" src="../img/tab2.png" />
<div id="controls"><img id="previous" src="../img/previous.png"
	onmouseover="previousOver();" onmouseout="previousOut();"
	onclick="changeVideo(-2);" /> <img id="playImg" src="../img/play.png"
	onMouseOver="playOver();" onmouseout="playOut();"
	onclick="playOrPause();" /> <img id="next" src="../img/next.png"
	onmouseover="nextOver();" onmouseout="nextOut();"
	onclick="changeVideo(-1);" />

<div id="bigVolumeContainer"><img id="volumeImg" src="../img/volume.png"
	onmouseover="volumeOver();" onmouseout="volumeOut();"
	onclick="muteOrUnmute();" />
<div id="volumeContainer" onmouseup="stopDrag();"
	onmousedown="startDrag();" onmousemove="changeVolume(event);">
<div id="volumeBarMax">
<div id="volumeBar"></div>
</div>
</div>
</div>

<p><input id="autoplay" type="checkbox" checked />Autoplay | <img
	id='full' src="../img/fullscreen.png" onclick="fullscreen();"
	onmouseover="setImgSrc('../img/fullscreenover.png', 'full')"
	onmouseout="setImgSrc('../img/fullscreen.png', 'full')" /></p>

</div>
</div>

<div id="playlist" style="right: -320px"><img id="tabPLaylist"
	src="../img/tab2right.png" onmouseover="animation2()" />
<div id="newVideos"></div>
<div id="playlistNav"><a id="playlistNavAll" href="javascript:void(0);"
	onclick="setFilter('all');">All</a> | <a id="playlistNavFavorite"
	href="javascript:void(0);" onclick="setFilter('favorites');">Favorites</a>
| <a id="playlistNavNew" href="javascript:void(0);"
	onclick="setFilter('new');">New</a></div>
<div id="listdiv">
<ul id="list">

</ul>
</div>
</div>

<?php
include('../twitter/footer.php');
?>